<!DOCTYPE html>
<html lang="en" class="html">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Home Page</title>
		<meta name="description" content="" />
		<meta name="author" content="mODY" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- JavaScripts --->
		<script src="js/mylibs/jquery.min.js"></script>
		<script src="js/mylibs/jquery.fancybox-1.3.4.pack.js"></script>
		<script src="js/mylibs/jquery.easing-1.3.pack.js"></script>
		<script type="text/javascript" src="js/mylibs/jquery.easing-1.3.pack.js"></script>
		<script type="text/javascript" src="js/mylibs/jquery.mousewheel-3.0.4.pack.js"></script>
		<!-- CSS -->
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
	<body>
		<header></header>
	<body>
		<h2 align="center" id="p">Add a new route</h2>
		<form id="newRoute" style="padding: 30px">
			<div id="pathAdd">
				<h3 id="p" style="font-size: xx-large;">Add a new Path</h3>
				<div class="divPath">
					Origin Location:
					<input type="text" id="from" style="width: 100px;" />
					Area:
					<input type="text" id="fromArea" style="width: 100px;" />
					<br />
					Destination Loaction:
					<input type="text" id="to" style="width: 100px;" />
					Area:
					<input type="text" id="toArea" style="width: 100px;" />
					<br />
					Transporation Type :
					<select class="type" onChange="addTypeSpecs(this);">
						<option value="none" disabled="true">Select a type</option>
						<option value="Metro">Metro</option>
						<option value="Bus">Bus</option>
						<option value="Taxi">Taxi</option>
					</select>
					<br />
					<div class="mspecs" style="display:none;">
						Start Station :
						<input id="s1" type="text" style="width: 100px" />
						Direction :
						<input id="bnum" type="text" style="width: 100px;" />
						<br />
						End Station :
						<input id="s2" type="text" style="width: 100px;" />
						Direction :
						<input id="bnum" type="text" style="width: 100px;" />
					</div>
					<div class="bspecs" style="display:none;">
						Bus Number :
						<input id="bnum" type="text" style="width: 100px;" />
						Direction :
						<input id="bnum" type="text" style="width: 100px;" />
					</div>
					Average Cost: EGP
					<input type="text" style="width: 30px;" />
					.
					<input type="text" style="width: 30px;" />
					<br />
					Average Time Taken:
					<select>
						<option disabled="true" value="this.selected">Hours</option>
						<option value="1">01</option>
						<option value="2">02</option>
						<option value="3">03</option>
						<option value="4">04</option>
					</select>
					:
					<select>
						<option disabled="true">Minutes</option>
						<option value="5">05</option>
						<option value="10">10</option>
						<option value="15">15</option>
						<option value="30">30</option>
						<option value="45">45</option>
					</select>
					<br />
				</div>
				<br />
			</div>
			<div id="newPath" style="display:none;"></div>
			<input type="button" id="addPath" value="Another path?" onclick="newPath();">
			<a href="#sucess" id="sub">
			<input type="button" value="Submit New Route" id="SubmitRoute">
			</a>
		</form>
		<div style="display:none;">
			<label id="sucess"><img src="img/success_icon.png" style="width: 20px;height: 20px" /> Submitted Successfully!!!</label>
		</div>
	</body>
	<footer></footer>
	<script>

		function addTypeSpecs(me) {
			if($(me).val() == 'Metro') {
				$(me).parent().find('.mspecs').slideToggle(400);
				$(me).parent().find('.bspecs').hide();

			}
			if($(me).val() == 'Bus') {
				$(me).parent().find('.mspecs').hide();
				$(me).parent().find('.bspecs').slideToggle(400);
			}
			if($(me).val() == 'Taxi') {
				$(me).parent().find('.mspecs').hide();
				$(me).parent().find('.bspecs').hide();
			}
		}
		
		function newPath()
		{
		        var clone = $('#pathAdd').clone();
		        clone.removeAttr('id');
		        clone.find('.bspecs').hide();
		        clone.find('.mspecs').hide();
		        clone.find('.type').val('Select a Type');
		        $('#pathAdd').after(clone);
		}


		$(document).ready(function() {
			$('#sub').fancybox({
				'modal':true,
				'hideOnContentClick' : true,
				'showCloseButton' : false
			});
		});

	</script>
	</body>
</html>
